<style>
.layout{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.headerBox{
	width: 100%;
	height: 50px;
	color: white;
	padding: 10px 20px;
}
.asideMemuBox{
	height: 100%;
	width: var(--add-width);
}
@keyframes addWidth {
  0% { width: var(--sub-width); } /* 动画开始时的宽度 */
  100% { width: var(--add-width); } /* 动画结束时的宽度 */
}
@keyframes subWidth {
  0% { width: var(--add-width); } /* 动画开始时的宽度 */
  100% { width: var(--sub-width); } /* 动画结束时的宽度 */
}
</style>
<template>
	<div class="layout h-100" id="module">
		<el-container class="flex flex-column h-100">
			<!-- , animation: `${collapse ? 'subWidth' : 'addWidth'} 0.5s` -->
			<el-aside class="asideMemuBox" :style="{backgroundColor: mainColor, width: `${collapse ? subWidth : addWidth}`, animation: `${collapse ? 'subWidth' : 'addWidth'} 0.1s`}">
				<Logo></Logo>
				<NavMenu></NavMenu>
			</el-aside>
			<el-container class="flex-1">
				<el-header class="headerBox" :style="{backgroundColor: mainColor}">
					<Header></Header>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import bus from '@/utils/mitt'
import Logo from '@/components/logo/index.vue';
import Header from './components/header.vue';
import NavMenu from './components/navMenu.vue';

const addWidth = '200px'
const subWidth = '66px'
document.documentElement.style.setProperty('--add-width', addWidth);
document.documentElement.style.setProperty('--sub-width', subWidth);

// 公共颜色的设置或获取
import { mainStore } from '@/store/index.js'
const store = mainStore()

let asideWidth = ref('200px')
let collapse = ref(false)
// 菜单
bus.on('collapseChange', (e) => {
	collapse.value = e
	if (e) {
		asideWidth.value = subWidth
	} else {
		asideWidth.value = addWidth
	}
})

let mainColor = ref(store.getters_mainColor)
bus.off('changeMainColor')
bus.on('changeMainColor', (e) => {
	console.log('changeMainColor')
	mainColor.value = e
})
// let root = ref('')
// root = window.g.API_ROOT// window.g.API_ROOT
// const { proxy } = getCurrentInstance() //获取公用方法proxy.$axios，或者use中方法
// console.log('proxy', proxy.$utils.isNull(''))
// import { defineComponent, inject } from 'vue'
// const testformatTime = () => {
// 	return inject('$formatTime')
// }
import setting from '@/api/settings.js'
console.log('setting', setting)
import utils from '@/utils/utils.js'
console.log('isNull', utils.isNull([1, 2, 3]))

onBeforeUnmount(() => {
	bus.off('collapseChange')
	bus.off('changeMainColor')
})
</script>
